<!-- 编辑店铺 -->
<template>
    <div class="page-box h100 display-flex czbj">
        <p class="title-label mb10">编辑店铺</p>
        <div class="zcdszsdfrtrt">
        <n-form ref="formRef" :model="xxfrom" :rules="rules">
            <n-grid :cols="24" :x-gap="24">
                <n-form-item-gi :span="24" path="shopName" label="店铺名称" label-placement="left">
                    <n-input v-model:value="xxfrom.shopName" type="text" placeholder="请输入店铺名称" />
                </n-form-item-gi>

                <n-form-item-gi :span="24"  label="联系固定电话" label-placement="left">
                    
                    <div class="display-flex">
                        <div class="zxcxzwertertt">
                            
                            <n-select v-model:value="kjxsdrr" :options="lxianxisdf" />
                        </div>
                        <div class=" flex-1">
                            <n-input v-if="kjxsdrr==1" v-model:value="xxfrom.contactPhone" type="text" placeholder="建议区号-电话，如0571-88888888" />
                            <n-input v-if="kjxsdrr==2" v-model:value="xxfrom.contactMobile" type="text" placeholder="请输入手机号码" />
                        </div>
                    </div>
                </n-form-item-gi>

                <n-form-item-gi :span="12" path="newShopCategory" label="经营类目" label-placement="left">
                    <n-tree-select v-model:value="xxfrom.newShopCategory" :options="menksdert" :default-expand-all="true"/>
                </n-form-item-gi>
                <n-form-item-gi :span="12" path="settleAlipayLogonId" label="收款账号" label-placement="left">
                    <div class="display-flex">
                        <div class="flex-1 vertical-center tl"> 
                            {{ xxfrom.settleAlipayLogonId||'--' }}
                            <!-- <n-input v-model:value="xxfrom.settleAlipayLogonId" type="text"
                                placeholder="门店结算收款的支付宝账号" /> -->
                        </div>
                        <!-- <div class="ml10 ls vertical-center sz pr">
                            说明
                            <n-image class="kzxczxsdtert" width="100"
                                src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/case/wantu/img/shoukuan.png" />
                        </div> -->
                    </div>
                </n-form-item-gi>
                <n-form-item-gi :span="8" label="经营地址" label-placement="left">
                    <n-select v-model:value="xxfrom.businessAddress.provinceCode" :options="shengsdr"
                        @change="xzczxfsder" />
                </n-form-item-gi>
                <n-form-item-gi :span="8" label="" label-placement="left">
                    <n-select v-model:value="xxfrom.businessAddress.cityCode" :options="chengser"
                        @change="xzczxfsderb" />
                </n-form-item-gi>
                <n-form-item-gi :span="8" label="" label-placement="left">
                    <n-select v-model:value="xxfrom.businessAddress.districtCode" :options="chengssan" />
                </n-form-item-gi>
                <n-form-item-gi :span="24" label="详细地址" label-placement="left">
                    <n-input v-model:value="xxfrom.businessAddress.address" type="text" placeholder="请输入店铺名称" />
                </n-form-item-gi>


                <n-form-item-gi :span="6" label="门店类型" label-placement="left">
                    <div>
                        <n-select v-model:value="xxfrom.shopType" :options="leixing" class="w100" />
                    </div>
                </n-form-item-gi> 

                

            <n-form-item-gi :span="9" label="法人名称" label-placement="left">
                    <n-input  type="text" placeholder="请输入法人名称" v-model:value="xxfrom.legalName" />
                </n-form-item-gi>
                <n-form-item-gi :span="9" label="法人身份证号" label-placement="left">
                    <n-input  type="text" placeholder="请输入法人身份证号" v-model:value="xxfrom.legalCertNo"/>
                </n-form-item-gi>
         


                
                <n-form-item-gi :span="12" label="营业执照名称" label-placement="left">
                    <n-input type="text" v-model:value="xxfrom.certName" placeholder="请输入营业执照名称" />
                </n-form-item-gi>
                <n-form-item-gi :span="12" label="营业执照编码" label-placement="left">
                    <n-input v-model:value="xxfrom.certNo" type="text" placeholder="请输入营业执照编码" />
                </n-form-item-gi>
                
                <n-form-item-gi :span="12" label="营业执照图片" label-placement="left">

<div class="kzxcxzrtrtery vertical-center pr ab">

    <img :src="kdsfds" class="w100 h100 imgjz" v-if="kdsfds">
    <i class="iconfont dx-img fz40" v-else></i>
    <n-upload class="xzcdefrtetrt" accept=".jpg,.png" name="file_content"
        @before-upload="iscder = true" :on-change="handleFileChange" @finish="handleFinish"
        :action="apiUrl + 'meirong/axf/upimg'">
        <n-button class="zxcxzrtetert">上传文件</n-button>
    </n-upload>
</div>
<!-- -->
</n-form-item-gi>
                <n-form-item-gi :span="12" label="店铺门照" label-placement="left">
                    <div class="kzxcxzrtrtery vertical-center pr ab">

                        <img :src="kdsfdsa" class="w100 h100 imgjz" v-if="kdsfdsa">
                        <i class="iconfont dx-img fz40" v-else></i>
                        <n-upload class="xzcdefrtetrt" accept=".jpg,.png" name="file_content"
                            @before-upload="iscder = true" :on-change="handleFileChangea" @finish="handleFinisha"
                            :action="apiUrl + 'meirong/axf/upimg'">
                            <n-button class="zxcxzrtetert">上传文件</n-button>
                        </n-upload>
                    </div>
                </n-form-item-gi>

            
         

             
           


                <!-- <n-form-item-gi :span="6" label="营业执照类型" label-placement="left">
                    <n-select v-model:value="xxfrom.certType" :options="jxzcfsdfs" />
                    
                </n-form-item-gi> -->








            </n-grid>
        </n-form>
        </div>

        <div class="zxcxzrtertertret vertical-center">
            <div>
                <n-button type="info" @click="bapocunsdft" :loading="iscder"> 保存 </n-button>
                <n-button type="error" class="ml20" @click="callBack"> 返回上一页 </n-button>
            </div>
        </div>
    </div>
</template>
<script lang='ts' setup>
import { dxget, hf, qurl, callBack, dxpost } from "../../util/index";
import { ref } from 'vue'
import { apiUrl } from "../../util/config";
const formRef = ref();
const shengsdr = ref([])
const chengser = ref([])
const chengssan = ref([])
const cz = qurl()
const fileList = ref([])
const menksdert = ref()
let kdsfds = ref()
const kdsfdsa = ref()
const iscder = ref(false)
const kjxsdrr = ref('1')
const lxianxisdf = [
    {
        label: "固定电话",
        value: "1"
    }, {
        label: "移动电话",
        value: "2"
    }
]
const override = ({ option }) => {
    console.log(option);
    console.log('666');
      if (option.children) {
        return "toggleExpand";
      }
      return "default";
    };
const leixing = [
    {
        label: "直营",
        value: "01"
    }, {
        label: "加盟",
        value: "02"
    }
]

const jxzcfsdfs = [
    {
        label: "营业执照",
        value: "201"
    }, {
        label: "多证合一(统一社会信用代码)",
        value: "2011"
    }
]
const handleFileChange = ({ fileList }) => {
    for (const file of fileList) {
        const reader = new FileReader();
        reader.onload = (e) => {
            kdsfds.value = e.target.result
        };
        reader.readAsDataURL(file.file); // 将文件读取为 Data URL 以便进行图片数据显示
    }
};

const xxfrom = ref({
    shopName: "",
    contactMobile: "",//联系固定电话
    certType: "201",//营业执照类型
    ipRoleId: "",//商户角色ID
    newShopCategory: "",//门店类型
    shopType: "",//门店类型
    certImage: "",//营业执照照片
    certNo: "",//营业执照编码
    settleAlipayLogonId: '',//收款账号

    legalName:"",
    legalCertNo:"",
    businessAddress: {
        provinceCode: "",
        cityCode: "",
        districtCode: '',
        address: ''
    }
})
const handleFinish = (a) => {
    const { data } = JSON.parse(a.event.currentTarget.responseText);
    xxfrom.value.certImage = data.data.image_id
    console.log(xxfrom.value)
    iscder.value = false

}

const handleFileChangea = ({ fileList }) => {
    for (const file of fileList) {
        const reader = new FileReader();
        reader.onload = (e) => {
            kdsfdsa.value = e.target.result
        };
        reader.readAsDataURL(file.file); // 将文件读取为 Data URL 以便进行图片数据显示
    }
};
const handleFinisha = (a) => {
    const { data } = JSON.parse(a.event.currentTarget.responseText);
    xxfrom.value.outDoorImages = data.data.image_id
    console.log(xxfrom.value)
    iscder.value = false

}
const rules = {
    shopName: {
        required: true,
        message: "请输入店铺名称",
        trigger: "blur",
    }, contactMobile: {
        required: true,
        message: "请输入联系固定电话",
        trigger: "blur",
    },
    // settleAlipayLogonId: {
    //     required: true,
    //     message: "请输入收款账号",
    //     trigger: "blur",
    // },
    newShopCategory: {
        required: true,
        message: "请选择门店类型",
        trigger: "blur",
    }, shopType: {
        required: true,
        message: "请选择门店类型",
        trigger: "blur",
    },
    provinceCode: {
        required: true,
        message: "请选择经营地址",
        trigger: "blur",
    },
};
const initsd = async () => {
    const { data } = await dxget("meirong/wantu/getshopQueryxq", { shopId: cz.shopId, storeId: cz.storeId })
    // fileList.value = data.outDoorImages
   try{
    data.outDoorImages.map(a => {
        console.log(a);

        fileList.value.push({
            name: '.png',
            url: a,
            status: 'finished',
        })
    })
   }catch(e){
    
   }
    if (data.code != 10000) {
        window.$message.error(data.subMsg)
        return
    }
    xxfrom.value = data
    try{
        kdsfdsa.value = data.outDoorImages[0]
    }catch(e){
        
    }
    shengsdr.value = await jxcdfd()
    const xewert = await jxcdfd({ type: 1, code: data.businessAddress.provinceCode })
    chengser.value = xewert
    chengssan.value = await jxcdfd({ type: 2, code: data.businessAddress.districtCode })
    kdsfds.value = data.certImage
    delete xxfrom.value['certImage']
   
    if(xxfrom.value.contactMobile){
        kjxsdrr.value = '2'
    }
}
initsd()

const jxcdfd = async (obj?) => {
    const { data } = await dxget('public/getArea', obj)
    data.map(a => {
        a.label = a.name
        a.value = a.code
    })
    return data
}
jxcdfd()


const fenlweixdsrt = async () => {
    const { data } = await dxget('meirong/wantu/fenlweixdsrt')
    menksdert.value = data

}
fenlweixdsrt()


const xzczxfsder = async (data) => {
    xxfrom.value.businessAddress.cityCode = ''
    xxfrom.value.businessAddress.districtCode = ''
    chengser.value = await jxcdfd({ type: 1, code: data })
}
const xzczxfsderb = async (data) => {
    xxfrom.value.businessAddress.districtCode = ''
    chengssan.value = await jxcdfd({ type: 2, code: data })
}
const bapocunsdft = async () => {
    formRef.value.validate(async (errors) => {
        if (!errors) {
            const { data } = await dxpost('meirong/wantu/xiugaimnsx', xxfrom.value)
            if (data.code != 10000) {
                window.$message.error(data.subMsg)
                return
            }
            window.$message.success('操作成功')
            callBack()
        }
    });
}

</script>
<style scoped></style>